<template>
  <div :class="classes">
    <draggable v-bind="options" :tag="tag" @start="drag = true" @end="drag = false">
      <slot></slot>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'AniDrag',
  components: {
    draggable
  },
  props: {
    tag: {
      type: String,
      default: 'div'
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {}
  },
  computed: {
    classes () {
      return [`ani-drag`]
    },
    dragOptions () {
      return {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
